// 定义函数  直接使用原生 typescript
const setCssVar = (variableName: string, value: string, element: HTMLElement = document.documentElement): void => {
    element.style.setProperty(variableName, value);
};

//默认主题颜色,从localStorage中获取
setCssVar('--ea-theme-color', localStorage.getItem('themeNavColor'))
setCssVar('--ea-theme-bar-color', localStorage.getItem('themeBarColor'))
setCssVar('--el-menu-bg-color', localStorage.getItem('themeBarColor'))
setCssVar('--ea-theme-font-color', localStorage.getItem('themeFontColor'))
setCssVar('--ea-theme-hover-color', localStorage.getItem('themeHoverColor'))
setCssVar('--el-menu-hover-bg-color', localStorage.getItem('themeHoverColor'))
setCssVar('--el-menu-text-color', localStorage.getItem('themeFontColor'))

const setTheme = (nav, bar, font, hover)=>{
    localStorage.setItem('themeNavColor', nav)
    localStorage.setItem('themeBarColor', bar)
    localStorage.setItem('themeFontColor', font)
    localStorage.setItem('themeHoverColor', hover)

    setCssVar('--ea-theme-color', nav)
    setCssVar('--ea-theme-bar-color', bar)
    setCssVar('--el-menu-bg-color', bar)
    setCssVar('--el-menu-text-color', font)

    setCssVar('--ea-theme-font-color', font)
    setCssVar('--ea-theme-hover-color', hover)
    setCssVar('--el-menu-hover-bg-color', hover)
}

export function  chooseTheme  (c){
    switch (c) {
        case 'green':
            //优先读取sotre中的颜色值,  并赋值主题颜色
            //按钮颜色
            setTheme('#67C23A','#000','#ffffff','#95d475');
            break;
        case 'blue':
            setTheme('#409EFF','#000','#ffffff','#79bbff');
            break;
        case 'purple':
            setTheme('#6954F0','#000','#ffffff','#7266F0');
            break;
        case 'red':
            setTheme('#F75444','#000','#ffffff','#F56C6C');
            break;
        case 'yellow':
            setTheme('#E79411','#000','#ffffff','#e7b035');
            break;
        case 'pink':
            setTheme('#F56DB6','#000','#ffffff','#F58ED0');
            break;
    }
}